$(document).ready(function() {
    let currentAppId = null;
    let appCallChart = null;
    
    // 打开应用模态框
    function openAppModal(isEdit = false, data = null) {
        const modal = $('#appModal');
        const modalContent = $('#appModalContent');
        
        if (isEdit && data) {
            $('#appModalTitle').text('编辑应用');
            $('#appId').val(data.id);
            $('#appName').val(data.name);
            $('#appType').val(data.type);
            $('#appDesc').val(data.desc);
            
            // 清空之前的选择
            $('input[name="apis"]').prop('checked', false);
            // 选中对应的接口权限
            if (data.apis && data.apis.length) {
                data.apis.forEach(api => {
                    $(`input[name="apis"][value="${api}"]`).prop('checked', true);
                });
            }
        } else {
            $('#appModalTitle').text('创建应用');
            $('#appForm')[0].reset();
            $('#appId').val('');
        }
        
        modal.removeClass('hidden');
        setTimeout(() => {
            modalContent.removeClass('scale-95 opacity-0').addClass('scale-100 opacity-100 transition-all duration-300');
        }, 10);
        $('body').css('overflow', 'hidden');
    }
    
    // 关闭应用模态框
    function closeAppModal() {
        const modalContent = $('#appModalContent');
        modalContent.removeClass('scale-100 opacity-100').addClass('scale-95 opacity-0 transition-all duration-300');
        setTimeout(() => {
            $('#appModal').addClass('hidden');
            $('body').css('overflow', 'auto');
        }, 300);
    }
    
    // 打开应用详情模态框
    function openAppDetailModal(appId) {
        currentAppId = appId;
        const modal = $('#appDetailModal');
        const modalContent = $('#appDetailModalContent');
        
        // 模拟获取应用详情数据
        const appData = getAppDataById(appId);
        if (!appData) return;
        
        // 填充详情数据
        $('#appDetailTitle').text(`${appData.name} - 详情`);
        $('#detailAppName').text(appData.name);
        $('#detailAppId').text(appData.appId);
        $('#detailAppType').text(getAppTypeName(appData.type));
        $('#detailCreateTime').text(appData.createTime);
        $('#detailStatus').html(getStatusBadge(appData.status));
        $('#detailLastCall').text(appData.lastCall);
        $('#detailAppDesc').text(appData.desc || '无描述');
        
        // 渲染接口权限
        const $apisContainer = $('#detailApis').empty();
        if (appData.apis && appData.apis.length) {
            appData.apis.forEach(api => {
                $apisContainer.append(`
                    <span class="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-full">${getApiName(api)}</span>
                `);
            });
        } else {
            $apisContainer.append('<span class="text-sm text-gray-500">无接口权限</span>');
        }
        
        // 初始化调用统计图表
        initAppCallChart(appId);
        
        modal.removeClass('hidden');
        setTimeout(() => {
            modalContent.removeClass('scale-95 opacity-0').addClass('scale-100 opacity-100 transition-all duration-300');
        }, 10);
        $('body').css('overflow', 'hidden');
    }
    
    // 关闭应用详情模态框
    function closeAppDetailModal() {
        const modalContent = $('#appDetailModalContent');
        modalContent.removeClass('scale-100 opacity-100').addClass('scale-95 opacity-0 transition-all duration-300');
        setTimeout(() => {
            $('#appDetailModal').addClass('hidden');
            $('body').css('overflow', 'auto');
            // 销毁图表
            if (appCallChart) {
                appCallChart.destroy();
                appCallChart = null;
            }
        }, 300);
    }
    
    // 初始化应用调用统计图表
    function initAppCallChart(appId) {
        // 销毁已有图表
        if (appCallChart) {
            appCallChart.destroy();
        }
        
        // 模拟数据
        const chartData = {
            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            data: appId == 1 ? [1200, 1900, 1500, 2400, 2800, 1800, 900] :
                  appId == 2 ? [800, 1200, 900, 1500, 1800, 1000, 600] :
                               [500, 800, 600, 1000, 1200, 700, 400]
        };
        
        const ctx = document.getElementById('appCallChart').getContext('2d');
        appCallChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: chartData.labels,
                datasets: [{
                    label: '调用次数',
                    data: chartData.data,
                    backgroundColor: '#165DFF',
                    borderRadius: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }
    
    // 创建应用按钮
    $('#createAppBtn').click(function() {
        openAppModal();
    });
    
    // 关闭应用模态框
    $('#closeAppModal').click(closeAppModal);
    $('#appModalOverlay').click(closeAppModal);
    
    // 应用表单提交
    $('#appForm').submit(function(e) {
        e.preventDefault();
        
        // 收集选中的接口权限
        const apis = [];
        $('input[name="apis"]:checked').each(function() {
            apis.push($(this).val());
        });
        
        if (apis.length === 0) {
            showNotification('请至少选择一个接口权限', 'error');
            return;
        }
        
        const appData = {
            id: $('#appId').val(),
            name: $('#appName').val(),
            type: $('#appType').val(),
            desc: $('#appDesc').val(),
            apis: apis
        };
        
        // 模拟API请求
        setTimeout(() => {
            closeAppModal();
            showNotification(appData.id ? '应用更新成功' : '应用创建成功', 'success');
            
            // 这里应该刷新应用列表
            console.log('保存应用数据:', appData);
        }, 800);
    });
    
    // 查看应用详情
    $(document).on('click', '.view-app', function() {
        const appId = $(this).data('id');
        openAppDetailModal(appId);
    });
    
    // 从详情页编辑应用
    $('#editFromDetailBtn').click(function() {
        if (currentAppId) {
            const appData = getAppDataById(currentAppId);
            if (appData) {
                closeAppDetailModal();
                setTimeout(() => {
                    openAppModal(true, appData);
                }, 350);
            }
        }
    });
    
    // 配置应用
    $(document).on('click', '.config-app', function() {
        const appId = $(this).data('id');
        const appName = $(this).closest('tr').find('.font-medium').text();
        showNotification(`正在配置应用：${appName}`, 'info');
        // 实际应用中应该跳转到配置页面或打开配置模态框
        console.log(`配置应用 ${appId}`);
    });
    
    // 应用统计
    $(document).on('click', '.stats-app', function() {
        const appId = $(this).data('id');
        const appName = $(this).closest('tr').find('.font-medium').text();
        showNotification(`查看 ${appName} 的统计数据`, 'info');
        // 实际应用中应该跳转到统计页面
        console.log(`查看应用 ${appId} 的统计`);
    });
    
    // 删除应用
    $(document).on('click', '.delete-app', function() {
        const $tr = $(this).closest('tr');
        const appId = $(this).data('id');
        const appName = $tr.find('.font-medium').text();
        
        if (confirm(`确定要删除应用 "${appName}" 吗？此操作不可恢复。`)) {
            // 模拟API请求
            setTimeout(() => {
                $tr.fadeOut(300, function() {
                    $(this).remove();
                    showNotification('应用已删除', 'success');
                });
                console.log(`删除应用 ${appId}`);
            }, 500);
        }
    });
    
    // 关闭详情模态框
    $('#closeAppDetailModal').click(closeAppDetailModal);
    $('#appDetailModalOverlay').click(closeAppDetailModal);
    $('#closeDetailBtn').click(closeAppDetailModal);
    
    // 搜索和筛选
    $('#appSearch').on('input', function() {
        const searchTerm = $(this).val().toLowerCase();
        filterApps(searchTerm, $('#appStatusFilter').val(), $('#appTypeFilter').val());
    });
    
    $('#appStatusFilter, #appTypeFilter').change(function() {
        filterApps($('#appSearch').val().toLowerCase(), $('#appStatusFilter').val(), $('#appTypeFilter').val());
    });
    
    // 过滤应用列表
    function filterApps(searchTerm, status, type) {
        // 实际应用中应该根据条件过滤表格行
        console.log(`搜索: ${searchTerm}, 状态: ${status}, 类型: ${type}`);
    }
    
    // 辅助函数：获取应用数据
    function getAppDataById(id) {
        // 模拟应用数据
        const apps = [
            {
                id: 1,
                name: '支付风控应用',
                appId: 'app-28f7d1e',
                type: 'risk',
                createTime: '2023-05-12',
                lastCall: '2023-06-01 14:30',
                status: 'running',
                desc: '用于支付环节的风险控制，实时检测异常交易',
                apis: ['payment_risk', 'anti_fraud']
            },
            {
                id: 2,
                name: '用户认证服务',
                appId: 'app-7c3d9e2',
                type: 'auth',
                createTime: '2023-04-28',
                lastCall: '2023-06-01 10:15',
                status: 'running',
                desc: '提供用户身份认证功能，支持多种认证方式',
                apis: ['user_auth', 'data_verify']
            },
            {
                id: 3,
                name: '反欺诈检测系统',
                appId: 'app-9a2b6c8',
                type: 'risk',
                createTime: '2023-04-15',
                lastCall: '2023-05-31 09:45',
                status: 'updating',
                desc: '检测并防范各类欺诈行为',
                apis: ['anti_fraud', 'data_verify']
            }
        ];
        
        return apps.find(app => app.id == id);
    }
    
    // 辅助函数：获取应用类型名称
    function getAppTypeName(type) {
        const typeMap = {
            'risk': '风控类',
            'auth': '认证类',
            'verify': '验证类'
        };
        return typeMap[type] || type;
    }
    
    // 辅助函数：获取接口名称
    function getApiName(api) {
        const apiMap = {
            'payment_risk': '支付风控API',
            'user_auth': '用户认证API',
            'data_verify': '数据校验API',
            'anti_fraud': '反欺诈API'
        };
        return apiMap[api] || api;
    }
    
    // 辅助函数：获取状态徽章HTML
    function getStatusBadge(status) {
        const statusMap = {
            'running': '<span class="px-2 py-1 text-xs bg-success/10 text-success rounded-full">运行中</span>',
            'stopped': '<span class="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">已停止</span>',
            'updating': '<span class="px-2 py-1 text-xs bg-warning/10 text-warning rounded-full">需更新</span>'
        };
        return statusMap[status] || status;
    }
    
    // 通知提示函数
    function showNotification(message, type) {
        const notification = $('#notification');
        const icon = $('#notificationIcon');
        const messageEl = $('#notificationMessage');
        
        notification.removeClass('bg-success bg-danger bg-warning bg-info')
                   .addClass('bg-' + (type || 'info'));
                   
        icon.removeClass('fa-check-circle fa-exclamation-circle fa-exclamation-triangle fa-info-circle text-success text-danger text-warning text-info')
            .addClass('fa-' + (
                type === 'success' ? 'check-circle text-success' : 
                type === 'error' ? 'exclamation-circle text-danger' :
                type === 'warning' ? 'exclamation-triangle text-warning' : 
                'info-circle text-info'
            ));
        
        messageEl.text(message);
        notification.removeClass('hidden').css('translateX', '0');
        
        setTimeout(() => {
            notification.css('translateX', 'calc(100% + 24px)');
        }, 3000);
    }
});